<template>
  <div class="container">
    <div class="left">
      <div class="logo">
        <span>城职</span>
        <span>就业管理平台</span>
      </div>
      <div class="left-nav">
        <router-link
          to="/workstation"
          active-class="active-link"
          class="default-link"
        >
          工作台
        </router-link>
        <router-link
          v-if="user && user.is_superuser"
          to="/school"
          active-class="active-link"
          class="default-link"
        >
          学校管理
        </router-link>
        <router-link
          v-if="user && user.is_superuser"
          to="/schooladmin"
          active-class="active-link"
          class="default-link"
        >
          学校管理员
        </router-link>
        <router-link
          to="/teacher"
          active-class="active-link"
          class="default-link"
        >
          教师账号
        </router-link>
        <router-link
          to="/student"
          active-class="active-link"
          class="default-link"
        >
          学生账号
        </router-link>
        <router-link
          v-if="user && user.is_school_admin"
          to="/employment"
          active-class="active-link"
          class="default-link"
        >
          就业管理
        </router-link>
        <router-link
          to="/person"
          active-class="active-link"
          class="default-link"
        >
          个人中心
        </router-link>
      </div>
    </div>
    <div class="right">
      <div class="top-nav">
        <div class="login-info">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-icon class="el-icon--left">
                <user />
              </el-icon>
              {{ user ? user.username : "未登录" }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus">
                  <router-link to="/person" class="default-link">
                    个人中心
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item :icon="CirclePlusFilled">
                  安全中心
                </el-dropdown-item>
                <el-dropdown-item :icon="CirclePlus" @click="logout">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="content">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { mapState } from "vuex";
import Cookies from "js-cookie";
import { getUser } from "../api/userApi";

export default {
  data() {
    return {};
  },
  beforeCreate() {
    getUser(0)
      .then((res) => {
        this.$store.commit("setUser", res);
      })
      .catch((error) => {
        ElMessage({
          message: error,
          type: "warning",
        });
      });
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    logout() {
      Cookies.set("token", "");
      this.$store.commit("resetStore");
      this.$router.replace({ name: "login" });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
  box-sizing: border-box;

  display: flex;
  flex-flow: row wrap;

  .left {
    display: flex;
    flex-flow: column nowrap;
    width: 20%;
    min-width: 200px;
    max-width: 250px;
    height: 100%;
  }

  .right {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    height: 100%;
  }
}

.logo {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 99px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--el-border-color);

  font-size: 25px;
  color: rgb(0, 0, 0);
  font-weight: 700;
}

.top-nav {
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid var(--el-border-color);
  box-sizing: border-box;
  padding: 5px 20px;
  background-color: #ffffff;
  //   box-sizing: border-box;
  //   margin-bottom: 1px;

  .login-info {
    display: inline-block;
  }
}

.left-nav {
  width: 100%;
  flex-grow: 1;
  background-color: #005aea;
  
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  .default-link {
    display: block;
    color: #fff;
    text-decoration: none;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      // color: rgb(160, 150, 90);
      color: #000;
      background-color:#ffffff;
      font-size: 18px;
      font-weight: 600;
      
    }
  }

  .active-link {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    background-color: #ffffff;
    // border-radius: 50px;
  }
}

.content {
  flex: 1;
}
</style>
